<template>
    <div class="tap-header">
        <div>
            <i class="el-icon-s-help"></i>
            论文管理系统
        </div>
        <div class="user-zero">
            <el-badge :is-dot="isDot" class="item">
                <i class="el-icon-bell" @click="handleOpenMessage()" />
            </el-badge>
            <el-dropdown>
                <el-avatar class="user-avator" size="small"
                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user">
                        <span @click="jumpToSelf()">个人信息</span>
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-close">
                        <span @click="handleLogout()">退出登录</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-drawer title="消息中心" :visible.sync="drawer" :direction="direction">
            <el-table :data="messageList" style="width: 100%" :show-header="false">
                <el-table-column prop="content" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleCheckedClick(scope.row)" type="danger" size="small">已读</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>

<script>
import apis from '@/utils/api';
import request from '@/utils/requestMethod';
import { Message } from 'element-ui';
import './style.less';

export default {
    name: 'tapHeader',
    mounted() {
        this.getAllMessages();
    },
    data() {
        return {
            // 是否有消息提示
            isDot: false,
            messageList: [],
            drawer: false,
            direction: 'rtl',
        }
    },
    methods: {
        // 获取所有消息列表
        getAllMessages() {
            const userInfo = JSON.parse(localStorage.getItem('userInfo'));
            const {
                name,
                role,
                post
            } = userInfo;
            console.log();
            request(apis.fetchAllMessage).then(res => {
                const {
                    objects,
                    message
                } = res.data;

                let messageList = [];
                objects.map(item => {
                    const {
                        reciver,
                        reciverRole,
                        reciverPost,
                        ifCheck
                    } = item;

                    if ((reciver === name || reciverPost === post || reciverRole === role) && !ifCheck) {
                        messageList.push(item);
                    }
                })

                if (messageList.length > 0) {
                    this.isDot = true;
                    Message.warning(message);
                } else {
                    this.isDot = false;
                }

                this.messageList = messageList;
            })
        },

        // 处理登出事件
        handleLogout() {
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            this.$router.push('/login');
        },

        // 跳转到个人信息页
        jumpToSelf() {
            this.$router.push('/self/info');
        },

        handleOpenMessage() {
            this.drawer = true;
        },

        handleCheckedClick(row) {
            request(apis.checkedMessage, {
                method: 'POST',
                body: row
            }).then(() => {
                this.getAllMessages();
            })
        }
    }
}
</script>